<template>
	<div class="complete" ref="root" v-show="show && null != config">
		<div class="actions">
			<div @click="show=false">退出</div>
		</div>
		<div class="main-wrap">
		</div>
	</div>
</template>
<script>
	import Scrape from '@service/scrape.service.js';
	import Storage from '@service/storage.service.js';
	import ConsoleService from '../service/console.service.js';
	import TreeRoot from '@component/tree/index.vue';
	export default {
		name: 'CompleteConsole',
		
		components: {
			TreeRoot		
		
		},

		data: function(){
			return {
				show: false,
				element: null,
				elementList:[],
				config: {}
			};

		},

		methods: {
			handleMenuEvt: function(evtMsg){
				let self = this;
				let menu = evtMsg.menu;
				if('openConsole' != menu.name && 'complete' != menu.showType){
					self.show = false;
					return;
				}
				self.updateScrapeInfo(evtMsg.element);

			},

			updateScrapeInfo: function(element){
				let self = this;
				let consoleService = self.consoleService;
				let config = Scrape.buildScrapeConfig(element);
				let snapshotId = consoleService.foundSnapshotId(element);
				self.$set(self, 'config', config);
				self.$bus.$emit('route-snapshot-node', snapshotId);
				self.element = element;
				self.show = true;

			},

			openCompleteConsole: function(event) {
				let self = this;
				let menuInfo = {name: 'openConsole'};
				self.$bus.$emit('menu-event', {from: 'config', menu: menuInfo, element: self.element, config: self.config});
				self.show = false;
			
			},

			buildRoute: function(route){
				if(route.id){
					return route.tagName + '#' + route.id;
				}
				if(route.classes && route.classes.length > 0){
					return route.tagName + '.' + route.classes.join('.');
				}
				return route.tagName + '[' + route.index + ']';

			},

			updateUseProp: function(event, prop, i){
				let self = this;
				let config = self.config;
				let element = self.element;
				config.useProp = prop;
				config.data = Scrape.retrieveConfigData(element, config);
				self.$set(self, 'config', config);

			},

			updateUseRoute: function(event, route, i){
				let self = this;
				let config = self.config;
				let element = self.element;
				config.useRoute = i;
				config.data = Scrape.retrieveConfigData(element, config);
				self.$set(self, 'config', config);
				event.target.scrollIntoView({behavior: 'smooth', block: 'center', 'inline': 'center'});

			}

		},

		mounted: function(){
			let self = this;
			let consoleService = new ConsoleService(self);
			self.consoleService = consoleService;			
			self.$bus.$on('snapshot-event', evtMsg => consoleService.handleSnapshotEvt(self, evtMsg));
			self.$bus.$on('show-console-type', evtMsg => self.handleMenuEvt(evtMsg));

		}

	
	}
</script>
<style>
	.complete{
		width: 960px;
		height: 620px;
		background: #2196f3f2 !important;
		overflow: hidden;
	}
	.actions {
		display: flex;
    	justify-content: right;		
	}
	.actions>div{
		margin: 0px 0px 0px 10px;
	}
	.main-wrap{
		display: flex;
		overflow: hidden;
	}
</style>